<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
    class="set-content"
  >
    <el-button
      @click="handlerStart"
      :class="canSet ? 'back-button' : 'start-button'"
      size="small"
      type="primary"
      v-if="!startDrawing"
    >
      {{ canSet ? "保存" : "修改" }}
    </el-button>
    <el-button
      v-if="canSet"
      @click="handlerCancelSet"
      :class="startDrawing ? 'cancel-button2' : 'cancel-button'"
      size="small"
    >
      取消
    </el-button>
    <el-button v-if="!canSet" @click="goBack" class="back-button" size="small">
      返回
    </el-button>
    <div>
      <aps-form
        :config="apsForm.formConfig"
        :model="apsForm.formData"
        :formRef="apsForm.formRef"
        :labelWidth="apsForm.labelWidth"
        ref="form"
      ></aps-form>
    </div>
    <div class="button-area">
      <div class="left">
        <div class="label">关联图纸：</div>
        <div class="name">{{ paperName }}</div>
        <el-button
          v-if="canSet && !startDrawing"
          size="small"
          type="primary"
          plain
          @click="handlerOpen"
        >
          修改图纸
        </el-button>
      </div>
      <div>
        <el-button
          v-if="canSet && !startDrawing"
          @click="handlerStartDrawing"
          size="small"
          plain
          type="primary"
        >
          绘制热区
        </el-button>
        <el-button
          v-if="canSet && startDrawing"
          size="small"
          type="warning"
          @click="handlerFinish"
        >
          结束绘制
        </el-button>
        <el-button
          v-if="canSet && startDrawing && pointStart"
          size="small"
          @click="handlerCancel"
        >
          取消绘制
        </el-button>
      </div>
    </div>
    <div class="content-area">
      <div class="canvas-area">
        <!-- @mousedown="startDrawing" -->
        <!-- @mousemove="continueDrawing"
        @mouseup="endDrawing" -->
        <canvas id="imageEffectCanvas"></canvas>
      </div>
      <div class="room-area">
        <div class="room-item" v-for="(item, index) in roomArr" :key="index">
          <div class="room-left">
            <img src="@/assets/images/ichnography/room.png" alt="" />
            <span>
              {{ item.myProperty.athorName }}
            </span>
          </div>
          <div class="room-right">
            <div class="select-item">
              <span>房间号：</span>
              <el-select
                v-model="item.myProperty.name"
                placeholder="请选择房间号"
                @change="(value) => handlerChangeSelect(value, item)"
                size="small"
                :disabled="!canSet || startDrawing"
              >
                <el-option
                  v-for="item in roomSelect"
                  :key="item.roomId"
                  :label="item.name"
                  :value="item.roomId"
                >
                </el-option>
              </el-select>
            </div>
            <div class="select-item">
              <span>房间名：</span>
              <el-select
                v-model="item.myProperty.nickname"
                placeholder="请选择房间名称"
                @change="(value) => handlerChangeSelect(value, item)"
                size="small"
                :disabled="!canSet || startDrawing"
              >
                <el-option
                  v-for="item in roomSelect"
                  :key="item.roomId"
                  :label="item.nickname"
                  :value="item.roomId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <i
            v-if="canSet && !startDrawing"
            @click="handlerDelect(item)"
            class="el-icon-close"
          ></i>
        </div>
      </div>
    </div>
    <component
      :is="modelName"
      :id="modelObj.paperId"
      :visible.sync="show"
      :modelObj="modelObj"
      @close="close"
      @givePaperUrl="givePaperUrl"
    ></component>
  </lb-layout>
</template>

<script>
// // // 初始化画布控制器
// fabric.Object.prototype.set({
//   cornerStrokeColor: "yellow", //边角描边颜色
//   cornerColor: "#ff4555", //边角颜色
//   cornerStyle: "circle", //边角形状
//   cornerSize: 10, //边角大小
//   borderScaleFactor: 2, //描边边框大小
//   borderColor: "red", //描边边框颜色
//   // strokeColor: "yellow", // 描边颜色
//   // strokeWidth: 20, // 描边宽度
// });

/* 房间对象自行添加字段解析 */
// myProperty: {
//   athorName:'',// 代表名称
//   roomId: null,// 房间ID
//   name: "", // 房间号
//   nickname: "",// 房间名称
// }

import { getroomList } from "@/api/park/roommsg.js";
import { getfloorSet, addSet, editSet } from "@/api/park/floormsg.js";
import operate from "./setoperate.vue";
export default {
  components: {
    operate,
  },
  data() {
    return {
      canSet: false, // 是否可以开始设置
      startDrawing: false, // 是否开始绘制
      pointStart: false, // 是否开始点击绘制了
      baseUrl: process.env.VUE_APP_BASE_API,
      isEdit: false, // 是否为修改
      paperUrl: "",
      paperName: "",
      //弹窗
      modelName: "",
      modelObj: {
        parkName: "",
        parkId: null,
        paperId: "", // 图纸ID
      },
      show: false,
      activeMenu: "",
      buildingId: null,
      floorId: null,
      apsForm: {
        formRef: "form",
        formData: {},
        labelWidth: "auto",
        formConfig: {
          formAttr: {
            inline: true,
            "label-position": "right",
            size: "small",
            bsColumn: {
              col: 5,
              middle: true,
            },
            rules: {},
          },
          properties: {
            parkName: {
              label: "园区名称：",
              typeName: "aps-des",
            },
            buildingName: {
              label: "楼宇名称：",
              typeName: "aps-des",
            },
            name: {
              label: "楼层名称：",
              typeName: "aps-des",
            },
            roomNum: {
              label: "楼层房间数：",
              typeName: "aps-des",
            },
          },
        },
      },
      roomSelect: [], //可选择的房间集合
      points: [],
      // 画布对象-绘制区域
      canvas: "",
      canvas2: "",
      // currentPolyline: null,
      // 当前第一个点对象
      firstPoint: null,
      // 当前对象形成线
      choseLine: null,
      // 当前不规则图形对象
      chosePolygon: null,
      // 当前不规则图形对象内部文字
      midText: null,
      // 当前图形和文字的组合对象
      choseGruop: null,
      roomArr: [],
      initArr: [],
      // 不规则图形对象的配置
      polygonSet: {
        fill: "rgba(18,184,103,0.42)",
        stroke: "#38AA56",
        strokeWidth: 3,
      },
    };
  },
  created() {},
  mounted() {
    this.getRouterMsg();
    this.initImageEffectCanvas();
  },
  methods: {
    givePaperUrl(paperUrl, name, id, falge) {
      if (falge == 3) {
        this.paperName = name;
        this.paperUrl = paperUrl;
        this.modelObj.paperId = id; // 选择将图纸ID保持
        if (this.paperUrl) {
          let path = this.baseUrl + this.paperUrl;
          // console.log(path, "path");
          let that = this;
          fabric.Image.fromURL(path, that.bindImg);
        }
        // 清空画布
        // 获取画布上的所有对象
        var objects = this.canvas.getObjects();
        // 遍历所有对象并移除
        for (let i in objects) {
          this.canvas.remove(objects[i]);
        }
        // 重新渲染画布
        this.canvas.renderAll();
        this.roomArr = [];
        this.startDrawing = false;
        this.pointStart = false;
      }
    },
    // 禁用图形的移动和修改功能;
    forbiddenCanvas() {
      // 禁用图形的移动和修改功能;
      this.canvas.forEachObject(function (object) {
        object.lockMovementX = true;
        object.lockMovementY = true;
        object.lockScalingX = true;
        object.lockScalingY = true;
        object.lockRotation = true;
        object.hasControls = false; // 选中框显示
        object.hasBorders = false;
      });
      this.canvas.off("selection:created", this.selectedChose);
      this.canvas.off("object:modified", this.modified);
      this.canvas.renderAll();
    },
    // 启用移动
    enableCanvas() {
      // 初始化画布控制器
      fabric.Object.prototype.set({
        cornerStrokeColor: "rgba(0,0,0,0)", //边角描边颜色
        cornerColor: "rgba(0,0,0,0)", //边角颜色
        cornerStyle: "circle", //边角形状
        cornerSize: 0, //边角大小
        borderScaleFactor: 0, //描边边框大小
        borderColor: "rgba(0,0,0,0)", //描边边框颜色
        // strokeColor: "yellow", // 描边颜色
        // strokeWidth: 20, // 描边宽度
      });
      this.canvas.forEachObject(function (object) {
        object.lockMovementX = false;
        object.lockMovementY = false;
        object.lockScalingX = true;
        object.lockScalingY = true;
        object.lockRotation = true;
        object.hasControls = true; // 选中框显示
        object.hasBorders = false;
      });
      // 移动等操作
      this.canvas.on("selection:created", this.selectedChose);
      this.canvas.on("object:modified", this.modified);
      // this.canvas.on("selection:cleared", this.selectedCleared);

      // this.canvas.on("object:moving", this.moving);
      // this.canvas.on("object:selected", this.selectedChose);
      // this.canvas.off("object:selected");
      // this.canvas.off("object:moving");
      // this.canvas.off("object:modified");
      // this.canvas.selection = false;
      this.canvas.renderAll();
    },
    // 初始化画布
    initImageEffectCanvas() {
      this.canvas = new fabric.Canvas("imageEffectCanvas", {
        width: "1300", //画布宽度
        height: "700", //画布高度
        backgroundColor: "#dddddd", //画布默认背景颜色
        hoverCursor: "default",
      });
      if (this.paperUrl) {
        let path = this.baseUrl + this.paperUrl;
        let that = this;
        fabric.Image.fromURL(path, that.bindImg);
      }
      this.forbiddenCanvas();
    },
    // 绑定底图/ 楼层平面图
    bindImg(img) {
      let that = this;
      that.canvas.setBackgroundImage(
        img,
        that.canvas.renderAll.bind(that.canvas),
        {
          scaleX: that.canvas.width / img.width,
          scaleY: that.canvas.height / img.height,
        }
      );
    },
    // 鼠标绘制
    dripPoints(event) {
      // 1点打点 2点删除1点画线 3点删除线出不规则图形
      const pointer = this.canvas.getPointer(event.e);
      const { x, y } = pointer;
      // 记录鼠标按下时的点位信息
      // console.log("鼠标按下坐标：", x, y);
      let obj = {
        x: x,
        y: y,
      };
      this.points.push(obj);
      this.pointStart = true;
      // 画点
      if (this.points.length == 1) {
        // 创建一个红色的点
        this.firstPoint = new fabric.Circle({
          radius: 1.5, // 半径
          fill: "#38AA56", // 填充颜色
          left: this.points[0].x, // 左边距
          top: this.points[0].y, // 上边距
        });
        // 将点添加到画布上
        this.canvas.add(this.firstPoint);
        // 重新渲染画布
        this.canvas.renderAll();
      }
      // 画线
      if (this.points.length == 2) {
        this.canvas.remove(this.firstPoint);
        this.firstPoint = null;
        // 创建一条红色的线
        let arr = [
          this.points[0].x,
          this.points[0].y,
          this.points[1].x,
          this.points[1].y,
        ];
        this.choseLine = new fabric.Line([...arr], {
          stroke: "#38AA56", // 线的颜色
          strokeWidth: 3, // 线的宽度
        });
        // 将线添加到画布上
        this.canvas.add(this.choseLine);
        // 重新渲染画布
        this.canvas.renderAll();
      }
      if (this.points.length >= 3) {
        this.canvas.remove(this.choseLine);
        this.choseLine = null;
        if (!this.chosePolygon) {
          this.chosePolygon = new fabric.Polygon([...this.points]);
          this.chosePolygon.set({
            ...this.polygonSet,
          });
          this.canvas.add(this.chosePolygon);
          this.addTexttoPolygon();
        } else {
          this.canvas.remove(this.chosePolygon); // 取消上个 重新生成
          this.chosePolygon = new fabric.Polygon([...this.points]);
          this.chosePolygon.set({
            ...this.polygonSet,
          });
          this.canvas.add(this.chosePolygon);
          this.addTexttoPolygon();
          // 点位更新方法（已淘汰）
          // this.chosePolygon.set({
          //   points: [...this.points],
          // });
          // console.log(this.chosePolygon.points, "111");
          // const simplifiedPoints = fabric.util.simplify(
          //   this.chosePolygon.points
          // );
          // // const simplifiedPoints = fabric.util.simplify([...this.points]);
          // console.log(simplifiedPoints, "222");
          // this.chosePolygon.set({
          //   points: simplifiedPoints,
          // });
          // this.chosePolygon.setCoords(); // 更新对象的坐标
        }
        this.canvas.renderAll(); // 重新渲染canvas，以显示更新后的点位信息
      }
    },
    // 对生成的不规则图形中心添加文字
    addTexttoPolygon() {
      this.canvas.remove(this.midText);
      let text = "";
      if (this.roomArr.length == 0) {
        text = "房间" + String(Number(this.roomArr.length) + 1);
      } else {
        let numArr = [];
        this.roomArr.map((item) => {
          let tt = item.myProperty.athorName.substring(2); // 获取最后一位
          numArr.push(Number(tt));
        });
        let num = 1;
        for (var i = 0; i <= this.roomArr.length + 1; i++) {
          if (numArr.indexOf(num) == -1) {
            text = "房间" + String(num);
          } else {
            num++;
          }
        }
      }
      // 获取 this.chosePolygon 的点位信息 然后
      this.midText = new fabric.Text(text, {
        left: this.chosePolygon.left + this.chosePolygon.width / 2,
        top: this.chosePolygon.top + this.chosePolygon.height / 2,
        originX: "center",
        originY: "center",
        fontSize: 20,
        fill: "#1C4023",
      });
      this.canvas.add(this.midText);
      this.canvas.bringToFront(this.midText); // 将文本对象置于最前面
    },
    // 开始绘制
    handlerStartDrawing() {
      this.startDrawing = true;
      this.points = [];
      this.chosePolygon = null;
      this.midText = null;
      this.choseGruop = null;
      this.canvas.on("mouse:down", this.dripPoints); // 开始监听鼠标点击
      this.forbiddenCanvas();
    },
    // 取消绘制
    handlerCancel() {
      this.pointStart = false;
      if (this.firstPoint) {
        this.canvas.remove(this.firstPoint);
        this.firstPoint = null;
      }
      if (this.choseLine) {
        this.canvas.remove(this.choseLine);
        this.choseLine = null;
      }
      if (this.midText) {
        this.canvas.remove(this.midText);
        this.midText = null;
      }
      if (this.chosePolygon) {
        this.canvas.remove(this.chosePolygon);
        this.chosePolygon = null;
      }
      if (this.choseGruop) {
        this.canvas.remove(this.choseGruop);
        this.choseGruop = null;
      }
    },
    // 结束绘制
    handlerFinish() {
      this.startDrawing = false; // 关闭绘制功能
      this.pointStart = false;
      this.canvas.off("mouse:down", this.dripPoints);
      // 启用选中移动等操作
      this.enableCanvas();
      if (this.firstPoint) {
        this.canvas.remove(this.firstPoint);
        this.firstPoint = null;
      }
      if (this.choseLine) {
        this.canvas.remove(this.choseLine);
        this.choseLine = null;
      }
      // 去掉不规则图形和文字只保留他们的组合
      if (this.chosePolygon && this.midText) {
        this.canvas.remove(this.chosePolygon);
        this.canvas.remove(this.midText);
        this.choseGruop = new fabric.Group([this.chosePolygon, this.midText], {
          left: this.chosePolygon.left,
          top: this.chosePolygon.top,
        });
        this.canvas.add(this.choseGruop);
        this.canvas.renderAll();
        this.choseGruop.myProperty = {
          athorName: "",
          roomId: "",
          name: "",
          nickname: "",
        }; // 赋予承接自定义属性的对象
        // 处理组合（房间对象）
        let text = "";
        this.midText._text.map((item) => {
          text += item;
        });
        this.giveTropertytoRoom("athorName", text); // 赋予房间对象代表名称
        this.roomArr.push(this.choseGruop);
      }
      // 排序this.roomArr
      this.sortArr();
    },
    // 排序数组
    sortArr() {
      let numArr = [];
      this.roomArr.map((item) => {
        let tt = item.myProperty.athorName.substring(2); // 获取最后的数字
        numArr.push(Number(tt));
      });
      numArr.sort(function (a, b) {
        return a - b;
      });
      let result = [];
      this.roomArr.map((item) => {
        let tt = item.myProperty.athorName.substring(2); // 获取最后的数字
        numArr.map((tig, index) => {
          if (tig == Number(tt)) {
            result[index] = item;
          }
        });
      });
      this.$nextTick(() => {
        this.roomArr = [...result];
      });
    },
    // 赋予房间对象属性
    giveTropertytoRoom(property, value) {
      this.choseGruop.myProperty[property] = value;
    },
    /* ..................图形操作类..................*/
    // 移动确定操作
    modified(event) {
      this.choseGruop = null;
      console.log(event, "移动操作");
      const target = event.target; // 获取被修改的对象
      this.choseGruop = target;
      // 获取对象的最新位置信息
      var left = target.left;
      var top = target.top;
      // 将最新的位置信息赋予对象
      this.choseGruop.set({
        left: left,
        top: top,
      });
      // 重新渲染画布
      this.canvas.renderAll();
      // 处理修改操作的逻辑 将移动的值重新赋值给target
    },
    // 选中对象
    selectedChose(event) {
      let that = this;
      // 取消选择之前的对象
      that.canvas.on("mouse:down", function () {
        that.canvas.discardActiveObject();
      });
      console.log(event, "选中");
      // this.choseGruop = null;
      const target = event.selected[0];
      this.choseGruop = target;
      // this.choseGruop.set({
      //   // borderColor: "blue",
      //   cornerColor: "green",
      //   cornerStrokeColor: "yellow",
      //   cornerSize: 10,
      //   cornerStyle: "circle",
      //   borderScaleFactor: 2, //描边边框大小
      //   borderColor: "red", //描边边框颜色
      //   // transparentCorners: false,
      // });
      // this.canvas.remove(target);
      // this.canvas.add(this.choseGruop);
      // // 重新渲染画布
      // this.canvas.renderAll();
      // 为选中的对象添加描边
      // target.set({
      //   stroke: "#ff4555", // 描边颜色
      //   strokeWidth: 5, // 描边宽度
      // });
      // this.canvas.renderAll();
      // this.showModel("operate", {});
      // 处理修改操作的逻辑
    },
    // 取消选中
    selectedCleared(event) {
      console.log(event, "取消选中");
      this.choseGruop = null;
    },
    // 返现初始化
    initC() {
      // 获取画布上的所有对象
      var objects = this.canvas.getObjects();
      // 遍历所有对象并移除
      for (let i in objects) {
        this.canvas.remove(objects[i]);
      }
      // 重新渲染画布
      this.canvas.renderAll();
      let that = this;
      this.roomArr = [];
      this.initArr.map((item) => {
        // 使用 fabric.util.enlivenObjects 方法将属性转换为 fabric 对象
        fabric.util.enlivenObjects([item], function (objects) {
          objects.forEach(function (object) {
            // 将对象添加到画布上
            object.set({ hoverCursor: "default" }); // 鼠标样式
            that.canvas.add(object);
            that.roomArr.push(object);
          });

          // 重新渲染画布
        });
      });
      // console.log(this.roomArr, "initArr");
      // 渲染底图
      if (this.paperUrl) {
        let path = this.baseUrl + this.paperUrl;
        let that = this;
        fabric.Image.fromURL(path, that.bindImg);
      }
      that.canvas.renderAll();
      that.forbiddenCanvas();
      // 监听选中事件
    },
    getroomSelect() {
      this.roomSelect = [];
      let query = {
        parkId: this.modelObj.parkId,
        buildingId: this.buildingId,
        floorId: this.floorId,
      };
      getroomList(query)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          // console.log(res, "roomlist");
          let arr = res?.rows ?? [];
          if (arr.length > 0) {
            arr.map((item) => {
              let obj = {
                roomId: item.id,
                name: item.name,
                nickname: item?.nickname,
              };
              this.roomSelect.push(obj);
            });
          }
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    requestDetail() {
      this.initArr = [];
      getfloorSet(this.floorId)
        .then((res) => {
          console.log(res, "detail");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          if (!res.data) {
            this.isEdit = false;
          } else {
            this.isEdit = true;
            let detail = res.data;
            this.modelObj.paperId = detail?.paperId ?? "";
            this.paperUrl = detail?.picUrl ?? "";
            this.paperName = detail?.paperName ?? "";
            let arr = detail?.points ?? [];
            if (arr.length > 0) {
              arr.map((item) => {
                let target = JSON.parse(item);
                this.initArr.push(target);
              });
            }
            // console.log(this.initArr, "initArr");
            this.$nextTick(() => {
              this.initC();
            });
          }
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    getRouterMsg() {
      this.activeMenu = this.$route.meta.activeMenu; // 激活的菜单也是返回的菜单
      let query = this.$route.query;
      this.floorId = query.id;
      this.buildingId = query.buildingId;
      this.modelObj.parkId = query.parkId;
      this.modelObj.parkName = query.parkName;
      this.$nextTick(() => {
        this.$refs?.form?.setFieldsValue(query);
        this.getroomSelect();
        this.requestDetail();
      });
    },
    handlerChangeSelect(value, target) {
      // 1.处理选中右边房间对象右边反显选中（暂时不需要）
      console.log(value, target);
      let obj = {};
      this.roomSelect.map((item) => {
        if (item.roomId == value) {
          obj = item;
        }
      });
      this.roomArr.map((item) => {
        if (item == target) {
          item.myProperty = { ...item.myProperty, ...obj };
        }
      });
      this.$nextTick(() => {
        this.roomArr = [...this.roomArr];
      });
    },
    handlerOpen() {
      this.showModel("operate");
    },
    handlerDelect(target) {
      this.choseGruop = target;
      let text = "是否确定删除该房间信息？";
      this.$modal
        .confirm(text)
        .then(() => {
          let num = this.roomArr.indexOf(target);
          if (num > -1) {
            this.roomArr.splice(num, 1);
          }
          this.canvas.remove(this.choseGruop);
          this.choseGruop = null;
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    // 弹窗
    showModel(name) {
      this.modelName = name;
      // this.id = this.modelObj.paperId ?? "";
      setTimeout(() => {
        this.show = true;
      }, 200);
    },
    close(status) {
      this.show = false;
      setTimeout(() => {
        // if (status) this.handlerSearchDetail();
      }, 200);
    },
    handlerGoback() {
      let pathRouter = this.activeMenu;
      let query = {};
      this.$router.push({
        path: pathRouter,
        query: query,
      });
    },
    // 取消配置
    handlerCancelSet() {
      this.canSet = false;
      this.startDrawing = false;
      this.pointStart = false;
      this.handlerCancel();
      this.requestDetail();
      this.canvas.off("mouse:down", this.dripPoints);
    },
    // 开始配置
    handlerStart() {
      this.firstPoint = null;
      this.choseLine = null;
      this.midText = null;
      this.chosePolygon = null;
      this.choseGruop = null;
      if (this.canSet) {
        // 保存
        // 请求以后 this.canSet = !this.canSet;
        this.dealQuery();
        this.forbiddenCanvas();
      } else {
        // 开始修改
        this.enableCanvas();
        this.canSet = !this.canSet;
      }
    },
    // 处理请求参数
    dealQuery() {
      if (this.startDrawing) {
        this.$message.warning("请先结束绘制！");
        return;
      }
      let query = {
        parkId: this.modelObj.parkId,
        buildingId: this.buildingId,
        floorId: this.floorId,
        paperId: this.modelObj.paperId,
        pointList: [],
      };
      // 查重roomID
      let arr = this.roomArr;
      let num = 0;
      let nim = 0;
      for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i].myProperty.roomId === arr[j].myProperty.roomId) {
            console.log(arr[i]);
            num++;
          }
        }
        if (arr[i].myProperty.roomId == "") {
          nim++;
        }
      }
      if (num != 0) {
        this.$message.warning("房间选择绑定有重复，请确认！");
        return;
      }
      if (nim != 0) {
        this.$message.warning("房间信息有未选择绑定，请确认！");
        return;
      }
      this.roomArr.map((item) => {
        let pointObj = item.toObject(); // 获取对象的所有属性
        pointObj.myProperty = item.myProperty;
        let obj = {
          roomId: item.myProperty.roomId,
          point: JSON.stringify(pointObj),
        };
        query.pointList.push(obj);
      });
      console.log(query, "请求参数");
      // // debugger;
      this.$nextTick(() => {
        if (this.isEdit) {
          this.requestEdit(query);
        } else {
          this.requestAdd(query);
        }
      });
    },
    // 请求新增
    requestAdd(query) {
      addSet(query)
        .then((res) => {
          console.log(res);
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message.success("新增成功");
          this.canSet = !this.canSet;
          this.$nextTick(() => {
            this.requestDetail();
          });
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    // 请求修改
    requestEdit(query) {
      editSet(query)
        .then((res) => {
          console.log(res);
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message.success("修改成功");
          this.canSet = !this.canSet;
          this.$nextTick(() => {
            this.requestDetail();
          });
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    goBack() {
      let activeMenu = this.$route.meta.activeMenu; // 激活的菜单也是返回的菜单
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";

.set-content {
  position: relative;
  .start-button {
    position: absolute;
    right: 90px;
    z-index: 10;
  }
  .cancel-button {
    position: absolute;
    right: 90px;
    z-index: 10;
  }
  .cancel-button2 {
    position: absolute;
    right: 20px;
    z-index: 10;
  }
  .back-button {
    position: absolute;
    right: 20px;
    z-index: 10;
  }
}
.button-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    height: 30px;
    .label {
      margin-left: 16px;
      font-size: 16px;
      color: #606266;
      line-height: 40px;
      font-weight: 700;
    }
    .name {
      color: #545454;
      font-size: 14px;
      line-height: 32px;
      min-width: 100px;
      margin-left: 10px;
      margin-right: 20px;
    }
  }
}
.content-area {
  margin-top: 20px;
  width: 100%;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  // .canvas-area {
  //   // width: 100%;
  // }
  .room-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 300px;
    max-height: 700px;
    overflow-y: scroll;
    overflow-x: hidden;
    @include scrollBar2;
    .room-item {
      width: 280px;
      margin-top: 10px;
      margin-right: 10px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      background: #ffffff;
      box-shadow: 0px 2px 12px 4px rgba(21, 61, 145, 0.05);
      border-radius: 8px;
      .el-icon-close {
        color: #f56c6c;
        position: absolute;
        font-size: 26px;
        font-weight: 800;
        top: -13px;
        right: -14px;
        cursor: pointer;
      }
      .room-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: default;
        img {
          width: 50px;
          height: 50px;
        }
        span {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(34, 34, 34, 0.85);
          line-height: 28px;
        }
      }
      .room-right {
        span {
          cursor: default;
        }
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        float: right;
        .select-item {
          display: flex;
          align-items: center;
          margin: 5px 0;
          .el-select {
            width: 130px;
          }
        }
      }
    }
  }
}
</style>
